<template>
    <div>
        <div id="chart_example" class="chart_example"></div>
    </div>
</template>
   
<script >

import echarts from 'echarts'

export default {
    data() {
        return {}
    },
    mounted() {
        let this_ = this;
        let myChart = echarts.init(document.getElementById('chart_example'), 'default');
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        // { value: 484, name: 'Union Ads' },
                        // { value: 300, name: 'Video Ads' }
                    ]
                }
            ]
        };

        myChart.setOption(option);

        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize', function () { myChart.resize() });
    },
    methods: {},
    watch: {},
    created() {

    }
}
</script>
  
<style scoped>
h2 {
    text-align: center;
    padding: 30px;
    font-size: 18px;
}

#chart_example {
    width: 30%;
    height: 350px;
    /* border: 1px solid #72ccff; */
    margin: 0 auto;
}
</style>
  